import React from 'react';
import {Card, Button, Spin, Icon, Alert} from 'antd';
import './ui.less';

export default class Loadings extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const icon = <Icon type="loading" />;

    return (
      <div>
        <Card title="Spin 用法" className="card-wrap">
          <Spin size="small" />
          <Spin size="default" style={{margin: "0 10px"}} />
          <Spin size="large" />
          <Spin indicator={icon} style={{marginLeft: 10}} />
        </Card>

        <Card title="内容遮罩" className="card-wrap">
          <Alert
            message="Use Alert"
            description="Welcome to Admin System"
            type="info"
          />
          <Spin>
            <Alert
              message="Use Alert"
              description="Welcome to Admin System"
              type="warning"
            />
          </Spin>
          <Spin tip="加载中..." indicator={icon}>
            <Alert
              message="Use Alert"
              description="Welcome to Admin System"
              type="warning"
            />
          </Spin>
        </Card>
      </div>
    );
  }

}